<template>
  <div class="contact-wrapper">
    <img :src="code" class="codeimg" data-index='3' @mouseenter="enters"
      @mouseleave="leaver" v-show='showCode' />
    <img :src="phCS" class="t1" data-index='1' @mouseenter="enters"
      @mouseleave="leaver" />
    <img :src="olCS" class="t2" data-index='2' @mouseenter="enters"
      @mouseleave="leaver"/>
    <img :src="cd" class="t3" data-index='3' @mouseenter="enters"
      @mouseleave="leaver"/>
    <img :src="goTop" class="t4" data-index='4' @mouseenter="enters"
      @mouseleave="leaver"/>
  </div>
</template>
<script>
import code from '@/views/home/code.png'
import phCS from '@/views/home/ph-cs.png'
import olCS from '@/views/home/ol-cs.png'
import cd from '@/views/home/cd.png'
import goTop from '@/views/home/go-top.png'
export default {
  data(){
    return {
      code,phCS,olCS,cd,goTop,
      showCode:false
    }
  },
  methods:{
    enters(e){
      const index = e.target.dataset.index
      if(index ==3){
        this.showCode = true
      }else{
        this.showCode = false
      }
    },
    leaver(e){
      this.showCode = false
    }
  }
}
</script>
<style>
.contact-wrapper{
  height: 240px;
  width: 60px;
  position: fixed;
  bottom: 40px;
  right: 0;
  z-index: 10;
}
.contact-wrapper>img{
  width: 60px;
  height: 60px;
  display: block;
}
.contact-wrapper>img:hover{
  cursor: pointer;
}
.t1,.t3{
  background: rebeccapurple;
}
.t2,.t4{
  background: yellowgreen;
}
.contact-wrapper>.codeimg{
  width: 119px;
  height: 119px;
  position: absolute;
  left: -119px;
  top:120px;
}
</style>